<template>
<!-- 下载器数据分析-安装数据分析 -->
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <open-header @getMsg="getMsg" :baseExcelURL="baseExcelURL" :headerConfig="headerConfig"></open-header>
    <chart-modal :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <div class="tableBorder">
    <el-table id="DataTable" :data="tableData" border>
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="openNum" label="打开数"></el-table-column>
        <el-table-column prop="p2Num" label="第二页打开数"></el-table-column>
        <el-table-column prop="p2SucRate" label="P2成功率(%)"></el-table-column>
        <el-table-column prop="p3Num" label="第三页打开数"></el-table-column>
        <el-table-column prop="p3SucRate" label="P3成功率(%)"></el-table-column>
        <el-table-column prop="p4Num" label="第四页打开数"></el-table-column>
        <el-table-column prop="p4SucRate" label="P4成功率(%)"></el-table-column>
        <el-table-column prop="setupNum" label="安装数"></el-table-column>
        <el-table-column prop="setupRate" label="安装率(%)"></el-table-column>
    </el-table>
    <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    </div>
</div>
</template>

<script>
import OpenHeader from './header/OpenHeader';

import ChartModal from './ChartModal';
import {
    setdataAll01,
    getMax
} from '../config/setChart.js';
import {
    getChartConfig,
    HeaderConfig
} from '../config/toolsui.config.js';

export default {
    data() {
        return {
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/setup/exportInstallationExcel',
            getSetupDataByConditionURL: '' + this.$store.state.domain + '/bzDCP/setup/getSetupDataByCondition',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            headerData: '',
            headerConfig: {},
            tableData: [],
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01',
            },
            loading:false
        }
    },
    components: {
        OpenHeader,
        ChartModal
    },
    created() {
        this.initDataAll();
    },
    methods: {
        getMsg(data) {
            this.headerData = data;
            this.search();
        },
        getData() {
            this.$ajax.post(this.getSetupDataByConditionURL).then(response => {
                this.getDataSearch(response);
            });
        },
        getDataSearch(response) {
            let initialData = response.data.result;
            this.tableData = initialData;
            this.total = response.data.total;
            var legends = [];
            var openNum = [];
            var setupNum = [];
            var setupRate = [];
            var p2Num = [];
            var p3Num = [];
            var p4Num = [];
            for (var i = 0; i < response.data.result.length; i++) {
                legends[i] = response.data.result[i].date;
                openNum[i] = response.data.result[i].openNum;
                setupNum[i] = response.data.result[i].setupNum;
                setupRate[i] = response.data.result[i].setupRate;
                p2Num[i] = response.data.result[i].p2Num;
                p3Num[i] = response.data.result[i].p3Num;
                p4Num[i] = response.data.result[i].p4Num;
            }
            var setMaxs = getMax([openNum, setupNum, p2Num, p3Num, p4Num]);
            this.$store.state.chartOption['chart01'] = setdataAll01(
                legends.reverse(), [{
                        name: '打开数',
                        type: 'bar',
                        data: openNum.reverse()
                    },
                    {
                        name: '第二页打开数',
                        type: 'bar',
                        data: p2Num.reverse()
                    },
                    {
                        name: '第三页打开数',
                        type: 'bar',
                        data: p3Num.reverse()
                    },
                    {
                        name: '第四页打开数',
                        type: 'bar',
                        data: p4Num.reverse()
                    },
                    {
                        name: '安装数',
                        type: 'bar',
                        data: setupNum.reverse()
                    },
                    {
                        name: '安装率',
                        type: 'line',
                        data: setupRate.reverse(),
                        yAxisIndex: 1
                    }
                ],
                '',
                [{
                    name: '',
                    max: setMaxs,
                    formatter: ''
                }, {
                    max: 100,
                    formatter: '%'
                }]
            );
        },
        search() {
            let _this = this.headerData;
            if (_this.starttime == null || _this.endtime == null) {
                this.$message.warning('查询条件不能为空！');
                return;
            } else if (_this.starttime > _this.endtime) {
                this.$message.warning('开始时间不能大于结束时间！');
                return;
            } else {
                this.loading= true;
                this.currentPage=1;
                this.$ajax.post(this.getSetupDataByConditionURL,
                        this.qs.stringify({
                            starttime: _this.starttime,
                            endtime: _this.endtime,
                            appType: _this.appType,
                            channelType:_this.channelType,
                            appid: _this.appid,
                            area: _this.area,
                            prov: _this.prov,
                            winnt: _this.winnt,
                            wow: _this.wow,
                            resource: _this.resource,
                            soft: _this.soft,
                            antiVirus: _this.antiVirus,
                            isBar: _this.isBar,
                            isDev: _this.isDev,
                            isVersionSel: _this.isVersionSel,
                            radio: _this.radio,
                            check: _this.check,
                            isCom:_this.isCom,
                            currentPage: 1,
                            pageSize: this.pageSize
                        },{ indices: false })
                    )
                    .then(response => {
                        if (response.status == 200) {
                            this.getDataSearch(response);
                        }else{
                            this.$message.warning("网络错误！");
                            return;
                        }
                        this.loading = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getSetupDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        channelType:_this.channelType,
                        appid: _this.appid,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        antiVirus: _this.antiVirus,
                        isBar: _this.isBar,
                        isDev: _this.isDev,
                        isVersionSel: _this.isVersionSel,
                        radio: _this.radio,
                        check: _this.check,
                        isCom:_this.isCom,
                        currentPage: this,
                        currentPage,
                        pageSize: this.pageSize
                    },{ indices: false })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    }else{
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getSetupDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        channelType:_this.channelType,
                        appid: _this.appid,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        antiVirus: _this.antiVirus,
                        isBar: _this.isBar,
                        isDev: _this.isDev,
                        isVersionSel: _this.isVersionSel,
                        radio: _this.radio,
                        check: _this.check,
                        isCom:_this.isCom,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    },{ indices: false })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    }else{
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                });
        },
        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
            HeaderConfig.VersionSel = true;
            this.headerConfig = HeaderConfig;
        },
    }
}
</script>

<style scoped>

</style>
